<template>
  <div>
    <el-dialog
      title="设置接警人"
      :visible.sync="dialogVisible"
      width="520px"
      :before-close="closeEditDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-form
        :model="addInfo"
        :rules="rules"
        ref="refAddInfo"
        label-width="80px"
      >
        <!-- <el-form-item size="small" label="园区名称" prop="name">
          <el-input clearable v-model.trim="addInfo.name"></el-input>
        </el-form-item>
        <el-form-item size="small" label="">
          <el-button icon="el-icon-map-location" @click="openMap">地图选点</el-button>
        </el-form-item>
        <el-form-item size="small" label="地区" prop="provinceCityAreaValue">
          <v-distpicker :province="addInfo.province" :city="addInfo.city" :area="addInfo.area" @province="getProvince"
            @city="getCity" @area="getArea"></v-distpicker>
        </el-form-item>
        <el-form-item size="small" label="详细地址" prop="address">
          <el-input type="textarea" :rows="2" placeholder="请输入详细地址" maxlength="100" v-model.trim="addInfo.address">
          </el-input>
        </el-form-item> -->

        <el-form-item size="small" label="接警人" prop="alarmReceiverIdList">
          <el-select
            v-model="addInfo.alarmReceiverIdList"
            filterable
            multiple
            :multiple-limit="6"
            placeholder="请选择接警人"
            style="width: 100%"
          >
            <el-option
              v-for="item in dataList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeEditDialog" class="cancel-button">取 消</el-button>
        <el-button size="small" @click="editSubmit" class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- <div class="mapLoc" v-if="isShowMap">
      <iframe :src="reqUrl" v-if="isShowMap" frameborder="0" class="iframe" seamless scrolling="no"></iframe>
    </div> -->
  </div>
</template>

<script>
import { reqAlarmReceiverList, reqAddReceiver } from "@/api/api";
import { mapState } from "vuex";

export default {
  name: "add",
  props: ["result"],
  data() {
    return {
      dataList: [],
      dialogVisible: false,
      addInfo: {
        alarmReceiverIdList: [],
      },
      // 表单验证规则
      rules: {
        name: [
          {
            required: true,
            message: "请输入企业名称",
            trigger: "blur",
          },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        // alarmReceiverIdList: [
        //   {
        //     required: true,
        //     message: "请选择接警人",
        //     trigger: ["blur", "change"],
        //   },
        // ],
      },
      reqUrl:
        "https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=44FBZ-OVKKP-T23D5-VGHUE-XDXC3-BDF53&referer=精卫安管理系统&policy=1",
      // isShowMap: false,
    };
  },
  watch: {},
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    // 获取接警人列表
    async getDataList() {
      const res = await reqAlarmReceiverList(1, 100, {
        userId: this.user.userId,
        roleName: this.user.roleName,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // console.log(res);
      this.dataList = res.data.rows;
    },
    // 新版省市区获取
    // getProvince(data) {
    //   this.addInfo.province = data.value;
    // },
    // getCity(data) {
    //   this.addInfo.city = data.value;
    // },
    // getArea(data) {
    //   this.addInfo.area = data.value;
    // },
    // openMap() {
    //   this.$store.commit("saveIsShowMap", true);
    //   // this.isShowMap = true
    // },
    // 点击修改
    editSubmit() {
      this.$refs.refAddInfo.validate(async (valid) => {
        if (valid) {
          const res = await reqAddReceiver({
            spaceId: this.result.id,
            alarmReceiverIdList: this.addInfo.alarmReceiverIdList,
          });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("新增接警人成功");
          this.closeEditDialog();
          this.$parent.getByTargetId();
        }
      });
    },
    // 点击关闭弹框
    closeEditDialog() {
      this.$refs.refAddInfo.resetFields();
      this.dialogVisible = false;
    },
  },

  deactivated() {
    if(this.$refs.refAddInfo!=null){
      this.closeEditDialog();
    }
  },
};
</script>

<style lang="less" scoped>
@import url("../../common.less");
// .mapLoc {
//   height: 100vh;
//   width: 100vw;
//   position: fixed;
//   z-index: 9999;
//   top: 0;
//   left: 0;

//   .iframe {
//     width: 100%;
//     height: 100%;
//   }
// }

// // 省市区
// ::v-deep .distpicker-address-wrapper select {
//   // padding: 0.2rem 1.75rem;
//   height: 35px;
//   font-size: -1rem;
//   font-size: 14px;
//   line-height: 1.25;
//   width: 360px;
//   margin-bottom: 10px;
//   background-color: @primaryHeaderBgcolor  !important;
//   border: 1px solid @primaryBorderColor;
//   color: @primaryContentTxt  !important;
// }

// // dialog 框
// ::v-deep .el-dialog {
//   background: transparent;
// }

// ::v-deep .el-dialog__header {
//   background: @primaryBgcolor;
//   border-radius: 6px 6px 0 0;
// }

// ::v-deep .el-input__inner {
//   background: @primaryHeaderBgcolor  !important;
//   border: 1px solid @primaryBorderColor;
//   color: @primaryContentTxt  !important;
// }

// ::v-deep .el-dialog__footer {
//   background: @primaryHeaderBgcolor  !important;
//   border-radius: 0 0 6px 6px;
// }

// ::v-deep .el-dialog__title {
//   color: @primaryContentTxt  !important;
// }

// ::v-deep .el-dialog__close {
//   color: @primaryContentTxt  !important;
// }

// ::v-deep .el-textarea__inner {
//   background: @primaryHeaderBgcolor  !important;
//   color: @primaryContentTxt  !important;
// }

// ::v-deep .el-dialog__body {
//   background: @primaryHeaderBgcolor  !important;
// }

// ::v-deep .el-form-item__label {
//   color: @primaryThemeTxtColor2  !important;
// }

// ::v-deep .el-textarea__inner {
//   border: 1px solid @primaryBorderColor;
// }
</style>